<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link> -->
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link> -->
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->
    
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- <router-link :to="'/user/' + userId">用户</router-link> -->
    <!-- <router-link to="/profile">档案</router-link> -->
    <!-- <router-link :to="{
      path: '/profile', query: {
        name: 'xmo', age: 18, height: 169
      }
    }">档案</router-link> -->

    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <!-- <router-view></router-view> -->
    <!-- exclude里必须是index里引入的文件名（不忽略大小写） -->
    <!-- 且不能加空格exclude="Profile,User" -->
    <keep-alive exclude="Profile">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId: 'lisi'
    }
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId);
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'xmo',
          age: 18,
          height: 169
        }
      })
    }
    // homeClick() {
    //   // this.$router.push('/home');
    //   this.$router.replace('/home');
    //   console.log("homeClick");
    // },
    // aboutClick() {
    //   // this.$router.push('/about');
    //   this.$router.replace('/about');
    //   console.log("aboutClick");
    // }
  }
}
</script>

<style>
  .active {
    color: tomato
  }
</style>
